import './main.css';
import cardImg from '../../images/card-image.png';
import gsap from "gsap";
import {useEffect, useState, useContext} from "react";
import {slogan} from "../../assets/slogan";
import {Context} from "../../context";


function Main() {

    const [array, setArray] = useState([]);

    let url = 'https://t-pay.iqfit.app/subscribe/list-test';
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
                const data = await response.json();
            setArray(data);
        };

        fetchData();
    }, []);

    function CardProps () {


        const sale = (array.filter(array => array.isPopular == true))
        sale.forEach((item) => {
            slogan.forEach((el) => {
                if (item.name === el.name) {
                    item.sloganText = el.sloganText
                }
            })
        })
        const card = (array.filter(array => array.isPopular == false && array.isDiscount == false))
        card.forEach((item) => {
            slogan.forEach((el) => {
                if (item.name === el.name) {
                    item.sloganText = el.sloganText
                }
            })
        })

        return card
        if (seconds>0) {
            return sale

        } else {
            gsap.to('.card-block__procent', {opacity: '0'})
            gsap.to('.card-block_old', {opacity: '0'})
            let ctx = gsap.context(() => {
                gsap.fromTo('.card-block' , {background: '#fd4d35', repeat: 2}, {background: '#ffffff', repeat: 2})
            });

            return card

        }

    }

    console.log(array)
    const {seconds} = useContext(Context);


    return (
        <>
        <main>
            <h1 className='title'>Выберите подходящий тарифный план</h1>
            <div className="container">
                <div className='main-block'>
                    <div className="main-block__left">
                        <img src={cardImg} alt="card image" className="card-image"/>
                    </div>
                    <div className="main-block__right">
                        <div className="card">{
                            CardProps().map((obj) => (
                                <div className="card-block">
                                    <div className="card-block__procent">30%</div>
                                    <span className="card-block__title">{obj.name}</span>
                                    <div className='card-block__price'>{obj.price}<span className='card-block_old'>999₽</span></div>
                                    <div className="card-block__text">{obj.sloganText}</div>
                                </div>
                            ))
                        }
                        </div>
                        <div className="action">
                            <span className="action-slogan">Следуя плану на 3 месяца, люди получают в 2 раза лучший результат, чем за 1 месяц</span>
                            <div className="action-checkbox">
                                <input type="checkbox" className="action-checkbox__input"/>
                                <span className='action-checkbox__text'>Я соглашаюсь с <a href="#">Правилами сервиса</a> и условиями <a href="#">Публичной оферты.</a></span>

                            </div>
                            <div className="action-button">
                                <button className="action-button__item action-button__int">Купить</button>
                            </div>
                            <div className="consent">
                                <span className="consent__text">Нажимая «Купить», Пользователь соглашается на автоматическое списание денежных средств по истечению купленного периода. Дальнейшие списания по тарифам участвующим в акции осуществляются по полной стоимости согласно оферте.</span>
                            </div>
                        </div>


                    </div>

                </div>

            </div>
        </main>
        </>
    );
}

export default Main;